<template>
  <div class="h100">
    <div class="card h100">
      <p class="title">
        <span>当前数据</span>
      </p>
      <div class="content h100">
        <div id="review_box">
          <ul
            id="comment1"
            style="margin-bottom:0">
            <li>当日采购到货数量xxxx30t</li>
            <li>当日销售出库数量xxxx50t</li>
            <li>当日管坯生产数量xxxx60t</li>
            <li>当日管坯生产数量xxxx60t</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
            <li>今天太阳好大啊。。。。。。。。。。</li>
          </ul>
          <ul
            id="comment2"
            style="margin-top:0">
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.roll(30)
    },
    methods: {
      roll(t) {
        var box = document.getElementById('review_box')
        var parent = document.getElementById('comment1')
        var parent2 = document.getElementById('comment2')

        parent2.innerHTML = parent.innerHTML
        /* 启动定器*/
        var timer = setInterval(autoScrollLine, t)
        /* 单行向上滚动效果*/
        function autoScrollLine() {
          if (box.scrollTop >= parent.offsetHeight) {
            box.scrollTop = 0
          } else {
            box.scrollTop++
          }
          if (box.scrollTop % box.offsetHeight == 0) {
            clearInterval(timer)
            setTimeout(() => {
              timer = setInterval(autoScrollLine, t)
            }, t)
          }
        }

        box.onmouseover = function() {
          clearInterval(timer)
        }
        box.onmouseout = function() {
          timer = setInterval(autoScrollLine, t)
        }
      }
    }
  }

</script>
<style scoped lang="scss">
  @import "./common.scss";
  #review_box{
   height: calc(100% - 50px);
    overflow: hidden;
    ul {
      list-style: none;
      width: 100%;
      padding-left:15px;
      line-height: 35px;
      >li{
        cursor: pointer;
      }
    }
  }
</style>
